/* - - - - - - - - - - - - - - - - - - - - -

 Title : 
 Author : 
 URL : http://

 Last Updated : 070612

- - - - - - - - - - - - - - - - - - - - - */

img#bottom {display:none; position:absolute; top:-20px}
#container, .embed #container {
	width: 360px !important;
	margin:0 auto;
	border: 1px solid #ddd !important; 
	padding: 10px 1% 10px 1%;
	/* -- CSS3 - add a drop shadow -- */
		-webkit-box-shadow:0px 0 30px #ccc !important;
		-moz-box-shadow:0px 0 30px #ccc !important; 
		box-shadow:0px 0 30px #ccc !important;	
/* -- CSS3 - define rounded corners for the form -- */	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px; 		
		
/* -- CSS3 - create a background graident -- */
		background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 
		background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
}
h1#logo {display:none;}
form.wufoo {margin: 0 10px !important; padding:0; }
.info h2 {float:left; width:40%;font-size:30px !important;}
.info div {font-size:16px; line-height:140%;}
form.wufoo li {	
	width:auto;
	padding-bottom:4px;	
}
form.wufoo li.mensaje {
width:auto; float:none;clear:both;
}
form.wufoo li.mensaje label {margin:0; padding-top:4px;}
form.wufoo li.buttons { width:100%;	float:none;}

form .instruct {text-align:center; padding:2px 5px 4px; width:45%;}
form li.focused .instruct, form li:hover .instruct {left:4%; visibility:visible;}

label.desc {margin:20px 0 0; float:right; width:30%; font-size:15px;}
input.medium, select.medium {width:60%;}

input.text, input.search, input.file, textarea.textarea, select.select {
	clear:both;
	margin:20px 0 0;
	border: 1px #ddd solid;
/* -- CSS3 Shadow - create a shadow around each input element -- */ 
	-webkit-box-shadow: 0px 0px 4px #aaa;
	-moz-box-shadow: 0px 0px 4px #aaa; 
	box-shadow: 0px 0px 4px #aaa;
		
/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
	-webkit-transition: background 0.3s linear;				
}
input.text, input.search, textarea.textarea{background:#fff;}
input:hover, textarea:hover { background: #eee; }

textarea.medium {height:12em;}

form li.buttons input.submit {
	padding:8px;
	font-size:15px;
	font-weight:bold;
	letter-spacing:1px;
	width: 140px;
	color: #eee; 
	text-transform: uppercase; 
	margin-left: 12px;
	background-color: #18a5cc;
	border: none;
		
	/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
	-webkit-transition: -webkit-box-shadow 0.3s linear;
	
	/* -- CSS3 - Rounded Corners -- */
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	border-radius: 4px; 
					
	/* -- CSS3 Shadow - create a shadow around each input element -- */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
	background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);		
} 

input.submit:hover { 		
	-webkit-box-shadow: 0px 0px 20px #555;
	-moz-box-shadow: 0px 0px 20px #aaa; 
	box-shadow: 0px 0px 20px #555;	
	cursor:  pointer; 
} 		

#errorLi{float:none}

/*............EMBED solution...............*/
html.embed {background: none !important}
html.embed body {margin:17px 0 15px !important}

@media only screen and (min-width: 768px) {
	#container, .embed #container {
		width: 780px !important;
		padding: 10px 20px 20px 20px;
	}
	
	form.wufoo li {
	width:35%;
	float:left;
	clear:left;
	}
	form.wufoo li.mensaje {width:60%; float:right;clear:right;}
	
}
